<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Color Properties | Framework7 Vue Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Color Properties | Framework7 Vue Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
                <li><a href="vue-component-extensions.html">Vue Component Extensions</a></li>
                <li><a href="navigation-router.html">Navigation / Router</a></li>
                <li><a href="colors.html">Color Properties</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Vue Components</div>
              <ul>
                <li><a href="app.html">App</a></li>
                <li><a href="accordion.html">Accordion</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icon.html">Icon</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-item.html">List Item</a></li>
                <li><a href="list-button.html">List Button</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable.html">Sortable</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="view.html">View</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Color Properties</h1>
          <ul class="docs-index"></ul>
          <div class="with-device" data-device-preview="../docs-demos/core/color-themes.html">
            <h2>Color Properties</h2>
            <p><b>All Framework7-Vue components</b> supports same set of color properties that allow to set separate element colors and color themes:</p>
            <table class="params-table">
              <thead>
                <tr>
                  <th>Prop</th>
                  <th>Type</th>
                  <th>Default</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>color</td>
                  <td>string</td>
                  <td></td>
                  <td>Single element color. One of the default colors.</td>
                </tr>
                <tr>
                  <td>color-theme</td>
                  <td>string</td>
                  <td></td>
                  <td>Applies color theme to the element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc. One of the default colors.</td>
                </tr>
                <tr>
                  <td>text-color</td>
                  <td>string</td>
                  <td></td>
                  <td>Sets element's text color. One of the default colors.</td>
                </tr>
                <tr>
                  <td>bg-color</td>
                  <td>string</td>
                  <td></td>
                  <td>Sets element's background color. One of the default colors.</td>
                </tr>
                <tr>
                  <td>border-theme</td>
                  <td>string</td>
                  <td></td>
                  <td>Sets element's borders color. One of the default colors.</td>
                </tr>
                <tr>
                  <td>ripple-color</td>
                  <td>string</td>
                  <td></td>
                  <td>Sets element ripple wave color (MD-theme only). One of the default colors.</td>
                </tr>
                <tr>
                  <td>theme-dark</td>
                  <td>boolean</td>
                  <td>false</td>
                  <td>Enables dark layout theme on element. It should be some parent element as this will have visual effect on all supported children elements, e.g. view, page, navbar, toolbar, list, etc.</td>
                </tr>
              </tbody>
            </table>
            <p>For example:</p><pre><code class="html"><span class="token comment">&lt;!-- Button color --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Red Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-button</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- Link color --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-link</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Green Link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-link</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- Page color theme --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-page</span> <span class="token attr-name">color-theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-page</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- Panel with dark theme --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-panel</span> <span class="token attr-name">theme-dark</span><span class="token punctuation">></span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-panel</span><span class="token punctuation">></span></span>
</pre></code>
            <h2>Supported Colors</h2>
            <table>
              <thead>
                <tr>
                  <th>Color</th>
                  <th>iOS</th>
                  <th>MD</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>red</td>
                  <td>
                    <div class="color-example" style="background-color: #ff3b30"></div>
                    <div>#ff3b30</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #f44336"></div>
                    <div>#f44336</div>
                  </td>
                </tr>
                <tr>
                  <td>green</td>
                  <td>
                    <div class="color-example" style="background-color: #4cd964"></div>
                    <div>#4cd964</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #4caf50"></div>
                    <div>#4caf50</div>
                  </td>
                </tr>
                <tr>
                  <td>blue</td>
                  <td>
                    <div class="color-example" style="background-color: #007aff"></div>
                    <div>#007aff</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #2196f3"></div>
                    <div>#2196f3</div>
                  </td>
                </tr>
                <tr>
                  <td>pink</td>
                  <td>
                    <div class="color-example" style="background-color: #ff2d55"></div>
                    <div>#e91e63</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #e91e63"></div>
                    <div>#e91e63</div>
                  </td>
                </tr>
                <tr>
                  <td>yellow</td>
                  <td>
                    <div class="color-example" style="background-color: #ffcc00"></div>
                    <div>#ffcc00</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #ffeb3b"></div>
                    <div>#ffeb3b</div>
                  </td>
                </tr>
                <tr>
                  <td>orange</td>
                  <td>
                    <div class="color-example" style="background-color: #ff9500"></div>
                    <div>#ff9500</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #ff9800"></div>
                    <div>#ff9800</div>
                  </td>
                </tr>
                <tr>
                  <td>gray</td>
                  <td>
                    <div class="color-example" style="background-color: #8e8e93"></div>
                    <div>#8e8e93</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #9e9e9e"></div>
                    <div>#9e9e9e</div>
                  </td>
                </tr>
                <tr>
                  <td>white</td>
                  <td>
                    <div class="color-example" style="background-color: #fff"></div>
                    <div>#fff</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #fff"></div>
                    <div>#fff</div>
                  </td>
                </tr>
                <tr>
                  <td>black</td>
                  <td>
                    <div class="color-example" style="background-color: #000"></div>
                    <div>#000</div>
                  </td>
                  <td>
                    <div class="color-example" style="background-color: #000"></div>
                    <div>#000</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>